<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="c1" width="800" height="600"></canvas>

  <script>
    var canvas = document.querySelector('#c1')
    var cvsCtx = canvas.getContext('2d')

    function render() {
    cvsCtx.clearRect(0, 0, 800, 600);
    cvsCtx.save();
    // cvsCtx.moveTo(400, 300);
    cvsCtx.translate(400, 300);

    cvsCtx.rotate(- Math.PI / 2);
    cvsCtx.save();
    for (let index = 0; index < 12; index++) {
      // 绘制小时的刻度
      cvsCtx.beginPath();
      cvsCtx.moveTo(170, 0);
      cvsCtx.lineTo(190, 0);
      cvsCtx.lineWidth = 8;
      cvsCtx.strokeStyle = 'gray';
      cvsCtx.stroke();
      cvsCtx.closePath();
      cvsCtx.rotate(2 * Math.PI / 12);
    }
    cvsCtx.restore();
    cvsCtx.save();
    for (let index = 0; index < 60; index++) {
      // 绘制分钟的刻度
      cvsCtx.beginPath();
      cvsCtx.moveTo(180, 0);
      cvsCtx.lineTo(190, 0);
      cvsCtx.lineWidth = 2;
      cvsCtx.strokeStyle = 'gray';
      cvsCtx.stroke();
      cvsCtx.closePath();
      cvsCtx.rotate(2 * Math.PI / 60);
    }
    cvsCtx.restore();
    cvsCtx.save();

    var time = new Date()
    var hour = time.getHours()
    var min = time.getMinutes()
    var sec = time.getSeconds()
    hour = hour >= 12 ? hour - 12 : hour

    // 绘制秒针
    cvsCtx.rotate(2 * Math.PI / 60 * sec);
    cvsCtx.beginPath();
    cvsCtx.moveTo(-30, 0);
    cvsCtx.lineTo(190, 0);
    cvsCtx.lineWidth = 2;
    cvsCtx.strokeStyle = 'red';
    cvsCtx.stroke();
    cvsCtx.closePath();
    cvsCtx.restore();
    cvsCtx.save();

    // 绘制分钟
    cvsCtx.rotate(2 * Math.PI / 60 * min + 2 * Math.PI / 60 / 60 * sec);
    cvsCtx.beginPath();
    cvsCtx.moveTo(-20, 0);
    cvsCtx.lineTo(130, 0);
    cvsCtx.lineWidth = 4;
    cvsCtx.strokeStyle = '#888';
    cvsCtx.stroke();
    cvsCtx.closePath();
    cvsCtx.restore();
    cvsCtx.save();

    // 绘制小时
    cvsCtx.rotate(2 * Math.PI / 12 * hour + 2 * Math.PI / 12 / 60 * min + 2 * Math.PI / 60 / 60 * sec);
    cvsCtx.beginPath();
    cvsCtx.moveTo(-15, 0);
    cvsCtx.lineTo(110, 0);
    cvsCtx.lineWidth = 8;
    cvsCtx.strokeStyle = '#333';
    cvsCtx.stroke();
    cvsCtx.closePath();
    cvsCtx.restore();
    cvsCtx.restore();
    requestAnimationFrame(render)
  }
  render()
  </script>
</body>

</html>